<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // promise + XMLHttpRequest实现与后端通信

      const SERVER_URL = 'http://127.0.0.1:8888/api/banner'
      function getJson(url, method = 'GET', data = null) {
        return new Promise((resolve, reject) => {
          let xhr = new XMLHttpRequest()
          // 创建 Http 请求
          xhr.open(method, url, true) //第三个参数是是否异步
          // 设置状态监听函数
          xhr.onreadystatechange = function () {
            if (this.readyState !== 4) return
            // 当请求成功时
            if (this.status === 200) {
              resolve(this.response)
            } else {
              reject(this.statusText)
            }
          }
          // 设置请求失败时的监听函数
          xhr.onerror = function () {
            reject(this.statusText)
          }
          // 设置请求头信息
          xhr.responseType = 'json'
          xhr.setRequestHeader('Accept', 'application/json')
          // 发送 Http 请求
          xhr.send(data)
        })
      }
      getJson(SERVER_URL, 'GET')
    </script>
  </body>
</html>
